figma-styled-components

Figma Styled Components

A set of styled components modeled after the Figma UI

Usage

npm i figma-styled-components --save

To test this library I've created this Figma plugin: fig-ui, that uses the components to recreate the Figma sidebar. You can clone the repo and checkout the code to see some example of the components in an actual Figma plugin.

import {Button, Checkbox, Input, Label, SectionTitle, Select, Switch, Text} from 'figma-styled-components`

<Button> I am a button</Button>

...

Documentation

Current documentation is in storybook project here

Locally

Install dependency with yarn and then run yarn storybook to build the storybook for this project

Build

You can build the project with yarn build

Todo

• Refactor to functional components
• Refactor select, handle default option better,
• Document component interfaces better, with code examples (maybe switch away from storybook)
• Expand demo plugin that uses components
• Use a theme wrapper
• Handle OptionStrip default selection better
• Tabs
• Decide if Text components should accept color
• Select with Icon, in Select trigger as well as in select option